<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<view></view>
				<view class="u-f-40 common-title">{{ lang_tabbar.personal }}</view>
				<message-btn></message-btn>
			</view>

			<!-- 头像信息 -->
			<view class="flex-center-between u-m-t-10 u-p-b-26">
				<view class="flex-center u-p-l-56">
					<view class="u-radius-50 personal-avatar clear-flex">
						<x-image :src="showImage(shopInfo.logoImgUrl, 'logo')"/>
					</view>

					<view class="u-m-l-12" style="position: relative;">
						<view class="u-f-34 u-lh-48 font-medio color-white">{{ shopInfo.name || '' }}</view>
						<x-rate :value="shopScore || 5"></x-rate>

						<view class="flex-center" style="position: absolute; top: 100%; left: 0;" @tap.stop>
							<view class="u-m-r-10 u-f-24 u-lh-34 linecamp-1 flex-center clear-flex color-grew"
								style="min-width: 100rpx; max-width: 500rpx;">
								<view v-for="(item, index) in signs" :key="index" :class="[index ? 'u-m-l-16' : '']">
									{{ item }}
								</view>
							</view>

							<view>
								<image src="@/static/image/common/edit.png" style="width: 24rpx; height: 24rpx;"
									class="clear-flex" @click="jumpUrl('/pages/shop/feature/save/save')"></image>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 积分收藏 -->
			<view style="padding: 30rpx 40rpx 0;">
				<view class="header-card">
					<view style="padding: 34rpx 0;">
						<view class="flex-center-between u-text-center">
							<view v-for="(item, index) in headerNavs" :key="index"
								:class="[index > 0 ? 'header-nav' : '']" style="width: 100%;"
								@click="jumpUrl(item.page)">
								<view class="u-f-36 u-lh-42 font-bold">{{ couponInfo[item.key] || 0 }}</view>
								<view class="u-m-t-4 u-f-24 u-lh-34 color-grew">{{ lang_shop[item.labelKey] }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 商家中心 -->
		<view style="padding: 94rpx 40rpx 0;">
			<view class="nav-card">
				<view>{{ lang_personal.shopCenter }}</view>

				<u-row class="flex-center-between ">
					<u-col v-for="(item, index) in settings" :key="index" :span="3">
						<view class="u-text-center u-p-t-30 u-p-b-16" @click="changePersonConfig(item)">
							<image :src="dealImg(item.key)" style="width: 52rpx;height: 52rpx" mode="heightFix"></image>
							<view class="u-m-t-10 u-f-24 u-lh-34">{{ lang_personal[item.labelKey] }}</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>

		<!-- 留空 -->
		<view style="height: 200rpx;"></view>
		<permission-unAuthTips v-model="settingValue"></permission-unAuthTips>
	</view>
</template>

<script>
	import { USER_TYPE } from '@/config.js'
	import {
		couponCouponData
	} from '@/api/merchant/coupon.js'
	export default {
		data() {
			// 初始化头部导航
			let headerNavs = [{
					key: 'totalUseCount',
					labelKey: 'allSale',
					label: '总核销量',
					page: '/pages/shop/write/list/list'
				},
				{
					key: 'useCount',
					labelKey: 'saled',
					label: '核销量',
					page: '/pages/shop/write/list/list'
				},
				{
					key: 'unUseCount',
					labelKey: 'unSale',
					label: '未核销量',
					page: '/pages/shop/write/list/list'
				},
				{
					key: 'sellCount',
					labelKey: 'sale',
					label: '销量',
					page: '/pages/shop/write/list/list'
				}
			]
			// 初始化个人中心导航
			let settings = [{
					key: 'message_black',
					labelKey: 'evaluateManager',
					label: '评价管理',
					page: '/pages/shop/evaluate/list/list'
				},
				{
					key: 'collect_black',
					labelKey: 'collectManager',
					label: '收藏管理',
					page: '/pages/shop/collect/list/list'
				},
				{
					key: 'note_black',
					labelKey: 'noteManager',
					label: '笔记管理',
					page: '/pages/shop/note/list/list'
				},
				{
					key: 'report_black',
					labelKey: 'writeManager',
					label: '核销报表',
					page: '/pages/shop/write/list/list'
				},
				{
					key: 'extension',
					labelKey: 'extensionManager',
					label: '推广服务',
					page: '/pages/shop/extension/list/list'
				},
				{
					key: 'contact',
					labelKey: 'contactPhone',
					label: '客服热线',
					page: ''
				},
				{
					key: 'reply',
					labelKey: 'reply',
					label: '意见反馈',
					page: '/pages/common/reply/reply'
				},
				{
					key: 'head',
					labelKey: 'transformUser',
					label: '用户端',
				},
			]
			// 虚拟数据signs
			return {
				couponInfo: {},
				headerNavs,
				settings,
				timer: null,
				
				settingValue: ''
			}
		},
		computed: {
			signs() {
				let list = []
				let obj = this.shopInfo || {}
				for (let key in obj) {
					let keyPrefix = 'feature'
					if (!key.indexOf(keyPrefix)) {
						list.push(obj[key])
					}
				}
				return list
			},
			shopScore() {
				let { totalScore, totalComments } = this.shopInfo
				return (totalScore || 0) / (totalComments || 1)
			}
		},
		onLoad() {
			let timer = setTimeout(() => {
				clearTimeout(timer)
				this.$store.commit('UPDATE_TABBAR_VISIBLE_TYPE', 'shop')
			}, 100)
		},
		onShow() {
			this.initCouponData()
		},
		methods: {
			// 触发【个人中心】选项，执行
			async changePersonConfig(item) {
				let { key, page } = item
				if (key === 'head') {
					uni.setStorageSync(USER_TYPE, 'user')
					this.$store.commit('UPDATE_TABBAR_VISIBLE_TYPE', 'user')
					uni.switchTab({
						url: '/pages/tabbar/user/personal/personal'
					})
				} else if (key === 'contact') {
					this.settingValue = await this.callAction(this.contactPhone)
				} else {
					this.jumpUrl(page)
				}
			},
			// 处理图片
			dealImg(key = '') {
				return require(`@/static/image/personal/${key}@2x.png`)
			},
			// 初始化核销数据
			initCouponData() {
				couponCouponData({}).then((data) => {
					this.couponInfo = {
						...data
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-container {
		background-color: #F9F9F9;
	}

	.header {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 10200;
		width: 750rpx;
		height: calc(var(--status-bar-height) + 338rpx);
		color: #FFFFFF;
		background: linear-gradient(to top, #263249 0%, #4E464B 100%, #4E464B 100%);
		;
	}

	.header::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: -78rpx;
		z-index: -1;
		width: 100%;
		height: 78rpx;
		background-color: #f9f9f9;
	}

	.personal {
		&-avatar {
			width: 99rpx;
			height: 99rpx;
			border: 2rpx solid #FFFFFF;
			background-color: #f9f9f9;
			border-radius: 100rpx;
			overflow: hidden;
		}
	}

	.header-card {
		padding: 0 30rpx;
		width: 670rpx;
		height: 156rpx;
		color: #333333;
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}

	.header-nav {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 2rpx;
			height: 45rpx;
			background-color: rgba(151, 151, 151, .16);
		}
	}


	.nav-card {
		padding: 20rpx;
		border-radius: 10rpx;
		background-color: #FFFFFF;
	}
</style>
